a标签保存 canvas 图片出现网络错误

在前端会有通过 canvas 合成图片，再保存到本地的情况，在保存的时候会有可能出现一些问题。

在我们接到和图片相关的需求时，如图片合成、压缩上传等都是通过 canvas 去实现。但把 canvas 处理后的图片下载到本地保存一般都是通过 a 标签来实现的：

const link_A = document.createElement("a");
link_A.download = "somename";
link_A.href = canvas.toDataURL("image/png");
document.body.appendChild(link_A);
link_A.click();
link_A.remove();

这也是一般性的做法，但是这样做会有一个问题就是 canvas 图片如果太大，会造成无法下载。在 Chrome 浏览器就会出现 网络错误 的问题。

这是因为在使用 锚元素（an Anchor Element） 标签时，例如：<a> ，他们的 src 或 href 属性会有长度的限制。若图片太大转化为 base64 会超出长度限制出现网络错误的问题。

解决办法为将 canvas 转化为 blob 实现下载：

将 base64 转化为 blob ：

const binStr = atob(base64.split(",")[1]);
const len = binStr.length;
const blobArr = new Uint8Array(len);

for (var i = 0; i < len; i++) {
  blobArr[i] = binStr.charCodeAt(i);
}

const imgBlob = new Blob([blobArr]);
link_A.href = URL.createObjectURL(imgBlob);

将 canvas 转化为 blob ：

canvas.toBlob(blob => {
  link_A.href = URL.createObjectURL(blob);
});

参考